<template>
    <section>
        <div class="title">个人信息</div>
        <div class="wrapper">
            <van-cell title="照片" is-link>
                <template #default>
                    <van-uploader v-model="fileList" multiple :max-count="1" :deletable="false"
                    :max-size="500 * 1024" />
                </template>
            </van-cell>

            <van-field v-model="userInfo.userName" label="姓名" input-align="right" disabled is-link/>

            <van-field v-model="userInfo.userSex" label="性别" input-align="right" disabled is-link/>

            <van-field v-model="userInfo.nation" label="民族" input-align="right" disabled is-link/>

            <van-field v-model="userInfo.xgno" label="工号" input-align="right" disabled is-link/>

            <van-field v-model="userInfo.idcard" label="身份证号" placeholder="" input-align="right" disabled is-link/>

            <van-field v-model="userInfo.birthday" label="出生日期" input-align="right" disabled is-link />
            <van-field v-model="userInfo.userOrganName" label="工作单位" input-align="right" disabled is-link/>
            <van-field v-model="userInfo.workTime" label="工作时间" input-align="right" disabled is-link />
            <van-field v-model="userInfo.unionName" label="所属工会" input-align="right" disabled is-link />
            <van-field v-model="userInfo.appointment" label="工会任职" input-align="right" disabled is-link />
            <van-field v-model="userInfo.userMobile" label="联系电话" placeholder="" input-align="right" disabled is-link/>

            <p>
                <button @click="$router.go(-1);">返回</button>
            </p>
        </div>
    </section>
</template>
<script>
import api from "@/data/api/index.js";

import Vue from 'vue';
import { Field } from 'vant';
import { Cell } from 'vant';
import { RadioGroup, Radio } from 'vant';
import { Popup } from 'vant';
import { DatetimePicker  } from 'vant';
import { Picker } from 'vant';
import { Uploader } from 'vant';
import { Toast } from 'vant';
import 'vant/lib/index.css';

Vue.use(Field);
Vue.use(Cell);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Popup);
Vue.use(DatetimePicker);
Vue.use(Picker);
Vue.use(Uploader);
Vue.use(Toast);

export default {
    data(){
        return{
            // 工会成员详情
            userInfo: {},
            registerStatus: 0,
            fileList: [],
            photoUrl: {},
        }
    },
    mounted() {
        let str=this.$route.query.tdata;
        let userId=JSON.parse(str);
        this.getUnionMember(userId);
    },
    methods: {
        // 获取工会成员详情
        getUnionMember(userId){
            api.showUnionMember(userId).then(res => {
                // 性别
                if(res.userSex!='男' && res.userSex!='女'){
                    res.userSex=res.userSex == "01" ? "男" : "女";
                }
                this.userInfo = res;

                // 入职时间
                if(res.workTime){
                    this.userInfo.workTime=this.dateDefaultVal(res.workTime)

                }
                // 出生日期
                if(res.birthday){
                    this.userInfo.birthday = this.dateDefaultVal(res.birthday)
                }
                // 照片
                this.photoUrl.url = 'https://i.hunnu.edu.cn/ums/avatar/' + res.userAccount;

                this.photoUrl.isImage = true;
                this.fileList.push(this.photoUrl);
            });
            // api.Appointment().then(res=>{
            //     // this.userInfo.appointment=appointment
            // })

        },
        //转换日期格式
        dateDefaultVal(d) {
            var date = new Date(d);
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate() ;
            month = month < 10 ? "0" + month : month;
            day = day < 10 ? "0" + day : day;
            return year.toString() + "-" + month.toString()+"-"+day.toString()
        }

    },
}
</script>
<style lang="scss" scoped>
section{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    background: #9C1017;
}
.title{
    height: 46px;
    line-height: 46px;
    margin: 20px 30px;
    color: #fff;
    font-size: 24px;
    background: url(../imgs/gate.png) no-repeat right center;
    background-size: contain;
}
.wrapper{
    position: absolute;
    top: 120px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px;
    font-size: 16px;
    background-color: #fff;
    border-top-left-radius: 35px;
    overflow-x: hidden;
    >p{
        padding: 50px 16px 25px;
        button{
            display: block;
            width: 100%;
            height: 53px;
            color: #fff;
            font-size: 20px;
            background-color: #9E0F16;
            border-radius: 28px;
        }
    }
}
</style>
